<template>
  <div>
    <!-- 导航栏 start -->
    <van-nav-bar title="求职助手" left-arrow @click-left="onClickLeft" fixed />
    <!-- 导航栏 end -->

    <!-- 输入 start -->
    <van-form @submit="onSubmit"> 
      <div class="job-assistant content-top">
        <dl>
          <dt>联系人</dt>
          <dd>
            <van-field size="large" v-model="personName" name="联系人" placeholder="请输入你的姓名" style="border-radius: 5px; font-size: 16px" :rules="[{ required: true}]" />
          </dd>
        </dl>

        <dl>
          <dt>手机号码</dt>
          <dd>
            <van-field size="large" v-model="phone" name="手机号码" placeholder="请输入你的手机号" style="border-radius: 5px; font-size: 16px" :rules="[{ required: true }]"/>
          </dd>
        </dl>

        <dl>
          <dt>求职意向</dt>
          <dd>
            <van-field size="large" v-model="jobIntent" name="求职意向" rows="10" autosize type="textarea" placeholder="请输入你的求职意向" style="border-radius: 5px; font-size: 16px; color: #333; line-height: 22px;" :rules="[{ required: true}]"/>
          </dd>
        </dl>

        <div class="btn">
          <van-button type="primary" block color="#05A6F0" round style="font-size: 18px" text="提交" native-type="submit"></van-button>
        </div>
      </div>
    </van-form>
    <!-- 输入 end -->
  </div>
</template>
  
  <script>
import { NavBar, Field, Button,Form, Toast } from "vant";
export default {
  name: "",
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Field.name]: Field,
		[Form.name]: Form,
  },
  // 定义属性
  data() {
    return {
      personName: '',
      phone: '',
      jobIntent: ''
    };
  },
  // 方法集合
  methods: {
    onSubmit(values) {
			var postData = {personName:this.personName,phone:this.phone,jobIntent:this.jobIntent};
      this.$api.post('/Wap/AssistantOfPerson',postData).then(res=>{
				Toast(res.msg);
				if(res.success){
					this.personName='';
					this.phone='';
					this.jobIntent='';
				}
			})
    },
  },
};
  </script>
  
<style scoped>
.job-assistant {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.job-assistant dl {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.job-assistant dt {
  margin-bottom: 5px;
  font-size: 14px;
  color: #666;
}

.job-assistant dd {
  display: flex;
  flex-direction: column;
}

.job-assistant .btn {
  display: flex;
}

.job-assistant .btn button {
  background-color: #05a6f0;
  border: none;
  font-size: 18px;
}
</style>